<!DOCTYPE html>
<html lang='zh-CN'>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>
            英雄联盟
        </title>
        <link href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css" rel="stylesheet">
        <style type="text/css">
            table {
                border-color:#c7c7c7;
                margin-top:20px;
                display:inline-table;
                
                width: 100%;
                border-collapse: collapse;
                border: #c7c7c7;
            }
            table td {
                width:100px;
                /*height:300px;*/
                margin-bottom: 30px;
                vertical-align: top;
                padding-left: 0.5%;
                padding-right: 0.5%;
                padding-bottom: 20px;
            }
            img::after {
                border: none;
                content: "";
                background: url() no-repeat center;
            }
            table img {
                /*width:50px;*/
                /*margin:2px;*/
                height: auto;
                min-height: 10%;
            position: relative;
            }


            @media (min-width: 100px) and (max-width:599px){
                table .img1 {
                    width: 33%;
                    margin:0;
                }   
            }
            @media (min-width: 600px) and (max-width:1023px){
                table .img1 {
                    width: 33%;
                    margin:0.1%;
                }   
            }
            @media (min-width: 1024px) and (max-width:1919px){
                table .img1 {
                    width: 24%;
                    margin:0.2%;
                }   
            }
            @media (min-width: 1920px){
                table .img1 {
                    width: 19%;
                    margin:0.2%;
                }   
            }
            .img2{
                width: 100%;
            }

            table tr:nth-child(2) img {
                border:2px solid #d0d0d0;
                cursor: url(down.png),pointer;
            }
            table tr:nth-child(3) img {
                border:2px solid #85f785;
                cursor: url(up.png),pointer;
            }
            .num {
                width:50px;
                line-height:50px;
                display:inline-table;
                text-align:-webkit-center;
                vertical-align:top;
            }
            #type1,#type2 {
                vertical-align:inherit;
                width:35px;
                text-align:-webkit-center;
            }
            table span {
                display:inline-block;
                margin:5px;
                overflow:hidden;
                word-break:keep-all;
                width:55px;
            }
            #tools {
                float:right;
                z-index:99;
                position:relative;
                margin-top: 4px;
            }
            .cnzz{
                float:left;
            }
            #importText {
                height:130px;
            }
            #exportText {
                height:210px;
            }
            .mui-badge {
                width:25px;
                vertical-align:bottom;
                margin-bottom:1px;
            }


        </style>
    </head>
    <body>
        <div class="container" style="
            width: 97%;
            margin: 0 auto;
        ">
        <header class="mui-bar mui-bar-nav mui-bar-transparent">
            <h1 class="mui-title">英雄联盟</h1>
        </header>
        <div class="cnzz" >
            <script type="text/javascript">
                // var cnzz_protocol = (("https:" == document.location.protocol) ? "https://": "http://");
                // document.write(unescape("%3Cspan id='cnzz_stat_icon_1276110619'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s96.cnzz.com/z_stat.php%3Fid%3D1276110619%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
            </script>
        </div>
        <div id="tools">
            <button id="reverse" class="mui-btn mui-btn-warning">
                反转
            </button>
            <button id="import" class="mui-btn mui-btn-primary">
                导入
            </button>
            <button id="export" class="mui-btn mui-btn-royal">
                导出
            </button>
        </div>
    <table style="width:100%; border-collapse: collapse;" border="1">
        <tbody style="width:100%">
            <tr>
                <th id="t">
                </th>
                <th>
                    刺客
                </th>
                <th>
                    法师
                </th>
                <th>
                    战士
                </th>
                <th>
                    坦克
                </th>
                <th>
                    射手
                </th>
                <th>
                    辅助
                </th>
            </tr>
            <tr style="min-height:300px;" title="未使用">
                <td id="type1">
                    未使用
                </td>
                <td id="ck1">
                </td>
                <td id="fs1">
                </td>
                <td id="zs1">
                </td>
                <td id="tk1">
                </td>
                <td id="ss1">
                </td>
                <td id="fz1">
                </td>
            </tr>
            <tr style="min-height:300px;" title="已使用">
                <td id="type2">
                    已使用
                </td>
                <td id="ck2">
                </td>
                <td id="fs2">
                </td>
                <td id="zs2">
                </td>
                <td id="tk2">
                </td>
                <td id="ss2">
                </td>
                <td id="fz2">
                </td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js">
    </script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js">
    </script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js">
    </script>
    <script type="text/javascript">

    // 生成文字图片
    function canvasWrapText(options) {
        let settings = {
            // canvas:document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
            canvas: document.createElement('canvas'),
            canvasWidth:480, //canvas的宽度
            width:100,
            height:100,
            drawStartX:10, //绘制字符串起始x坐标
            drawStartY:30, //绘制字符串起始y坐标
            lineHeight:30, //文字的行高
            font:"35px 'Microsoft Yahei'", //文字样式
            text:"请修改掉默认的配置", //需要绘制的文本
            drawWidth:460, //文字显示的宽度
            color:"#000000", //文字的颜色
            backgroundColor:"#ffffff", //背景颜色
        };
 
        //将传入的配置覆盖掉默认配置
        if(!!options && typeof options === "object"){
            for(let i in options){
                settings[i] = options[i];
            }
        }
 
        //获取2d的上线文开始设置相关属性
        let canvas = settings.canvas;
        canvas.width = settings.width;
        canvas.height = settings.height;
        let ctx = canvas.getContext("2d");
 
        //绘制背景色
        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);
 
        //绘制文字
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;

        let x = settings.width/ 2,y = settings.height / 2;
        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0, 0, settings.width, settings.height);
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.fillStyle = settings.color;
        ctx.font = settings.font;
        ctx.fillText(settings.text, x, y);
        return canvas.toDataURL();
    }
        function getItem(key) {
            let val = localStorage.getItem(key);
            if (val === null) {
                return false;
            }
            return val;
        }
        let loadImg = canvasWrapText({text:"loading",font:"25px 'Microsoft Yahei'"});
        function getHTML(item) {
            let html = "";
            showName = localStorage.getItem("showName") === "true";
            if (showName) {
                html = `<span class="img1" title="${item.name}"><img class="img2" src="${item.img}" alt="${item.name}" title ="${item.name}">${item.name}</span>`;
            }else{
                html = `<img class="img1" src="${item.img}" alt="${item.name}" onerror="errimg(this);" title="${item.name}">`;
            }
            html = `<img class="img1" src="${loadImg}" onload="javascript:this.onload=null;this.src='`+item.img+`'" alt="${item.name}" onerror="errimg(this);" title="${item.name}">`;
            return html;
        }
function numHTML(num1,num2){
                let html = `<span class = "mui-badge ">${num1}</span><span class="mui-badge mui-badge-success">${num2}</span>`;
                return html;
            }

            function tirgger(name) {
                let v = getItem(name);
                if (!v) {
                    localStorage.setItem(name, 2);
                } else {
                    if (v == '2') {
                        localStorage.setItem(name, 1);
                    } else {
                        localStorage.setItem(name, 2);
                    }
                }
            }

            let ck = [{
                name: "时间刺客 艾克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ekko.png"
            },
            {
                name: "狂野女猎手 奈德丽",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nidalee.png"
            },
            {
                name: "恶魔小丑 萨科",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Shaco.png"
            },
            {
                name: "永恒梦魇 魔腾",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nocturne.png"
            },
            {
                name: "不祥之刃 卡特琳娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Katarina.png"
            },
            {
                name: "无极剑圣 易",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/MasterYi.png"
            },
            {
                name: "痛苦之拥 伊芙琳",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Evelynn.png"
            },
            {
                name: "离群之刺 阿卡丽",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Akali.png"
            },
            {
                name: "潮汐海灵 菲兹",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Fizz.png"
            },
            {
                name: "诡术妖姬 乐芙兰",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Leblanc.png"
            },
            {
                name: "虚空行者 卡萨丁",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kassadin.png"
            },
            {
                name: "影流之主 劫",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Zed.png"
            },
            {
                name: "傲之追猎者 雷恩加尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Rengar.png"
            },
            {
                name: "刀锋之影 泰隆",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Talon.png"
            },
            {
                name: "虚空掠夺者 卡兹克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Khazix.png"
            },
            ],
            fs = [{
                name: "复仇焰魂 布兰德",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Brand.png"
            },
            {
                name: "魔蛇之拥 卡西奥佩娅",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Cassiopeia.png"
            },
            {
                name: "堕落天使 莫甘娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png"
            },
            {
                name: "黑暗之女 安妮",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Annie.png"
            },
            {
                name: "虚空之眼 维克兹",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Velkoz.png"
            },
            {
                name: "荆棘之兴 婕拉",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Zyra.png"
            },
            {
                name: "邪恶小法师 维迦",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Veigar.png"
            },
            {
                name: "万花通灵 妮蔻",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png"
            },
            {
                name: "冰晶凤凰 艾尼维亚",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Anivia.png"
            },
            {
                name: "虚空先知 玛尔扎哈",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Malzahar.png"
            },
            {
                name: "狂暴之心 凯南",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kennen.png"
            },
            {
                name: "铸星龙王 奥瑞利安·索尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/AurelionSol.png"
            },
            {
                name: "诺克萨斯统领 斯维因",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Swain.png"
            },
            {
                name: "解脱者 塞拉斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png"
            },
            {
                name: "发条魔灵 奥莉安娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Orianna.png"
            },
            {
                name: "天启者 卡尔玛",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Karma.png"
            },
            {
                name: "岩雀 塔莉垭",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Taliyah.png"
            },
            {
                name: "暗黑元首 辛德拉",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Syndra.png"
            },
            {
                name: "蜘蛛女皇 伊莉丝",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Elise.png"
            },
            {
                name: "死亡颂唱者 卡尔萨斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Karthus.png"
            },
            {
                name: "冰霜女巫 丽桑卓",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Lissandra.png"
            },
            {
                name: "九尾妖狐 阿狸",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ahri.png"
            },
            {
                name: "远古巫灵 泽拉斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Xerath.png"
            },
            {
                name: "猩红收割者 弗拉基米尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Vladimir.png"
            },
            {
                name: "符文法师 瑞兹",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ryze.png"
            },
            {
                name: "暮光星灵 佐伊",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Zoe.png"
            },
            {
                name: "末日使者 费德提克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Fiddlesticks.png"
            },
            {
                name: "沙漠皇帝 阿兹尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Azir.png"
            },
            {
                name: "爆破鬼才 吉格斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ziggs.png"
            },
            {
                name: "大发明家 黑默丁格",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Heimerdinger.png"
            },
            {
                name: "卡牌大师 崔斯特",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/TwistedFate.png"
            },
            {
                name: "光辉女郎 拉克丝",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Lux.png"
            },
            {
                name: "机械先驱 维克托",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Viktor.png"
            },
            ],
            zs = [{
                name: "暗裔剑魔 亚托克斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Aatrox.png"
            },
            {
                name: "铁铠冥魂 莫德凯撒",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Mordekaiser.png"
            },
            {
                name: "狂战士 奥拉夫",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Olaf.png"
            },
            {
                name: "影流之镰 凯隐",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kayn.png"
            },
            {
                name: "酒桶 古拉加斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Gragas.png"
            },
            {
                name: "沙漠死神 内瑟斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nasus.png"
            },
            {
                name: "祖安怒兽 沃里克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Warwick.png"
            },
            {
                name: "审判天使 凯尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kayle.png"
            },
            {
                name: "皎月女神 黛安娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Diana.png"
            },
            {
                name: "诺克萨斯之手 德莱厄斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Darius.png"
            },
            {
                name: "蛮族之王 泰达米尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Tryndamere.png"
            },
            {
                name: "荒漠屠夫 雷克顿",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Renekton.png"
            },
            {
                name: "虚空遁地兽 雷克塞",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/RekSai.png"
            },
            {
                name: "疾风剑豪 亚索",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Yasuo.png"
            },
            {
                name: "未来守护者 杰斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Jayce.png"
            },
            {
                name: "盲僧 李青",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/LeeSin.png"
            },
            {
                name: "海兽祭司 俄洛伊",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Illaoi.png"
            },
            {
                name: "放逐之刃 锐雯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Riven.png"
            },
            {
                name: "牧魂人 约里克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Yorick.png"
            },
            {
                name: "巨魔之王 特朗德尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Trundle.png"
            },
            {
                name: "战争之王 潘森",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Pantheon.png"
            },
            {
                name: "海洋之灾 普朗克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Gangplank.png"
            },
            {
                name: "无畏战车 厄加特",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Urgot.png"
            },
            {
                name: "祖安狂人 蒙多医生",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/DrMundo.png"
            },
            {
                name: "无双剑姬 菲奥娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Fiora.png"
            },
            {
                name: "机械公敌 兰博",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Rumble.png"
            },
            {
                name: "武器大师 贾克斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Jax.png"
            },
            {
                name: "战争之影 赫卡里姆",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Hecarim.png"
            },
            {
                name: "水晶先锋 斯卡纳",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Skarner.png"
            },
            {
                name: "皮城执法官 蔚",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Vi.png"
            },
            {
                name: "雷霆咆哮 沃利贝尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Volibear.png"
            },
            {
                name: "德邦总管 赵信",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/XinZhao.png"
            },
            {
                name: "刀锋舞者 艾瑞莉娅",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Irelia.png"
            },
            {
                name: "龙血武姬 希瓦娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Shyvana.png"
            },
            {
                name: "德玛西亚之力 盖伦",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Garen.png"
            },
            {
                name: "齐天大圣 孙悟空",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/MonkeyKing.png"
            },
            {
                name: "迷失之牙 纳尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Gnar.png"
            },
            {
                name: "青钢影 卡蜜尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Camille.png"
            },
            {
                name: "暴怒骑士 克烈",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kled.png"
            },
            {
                name: "兽灵行者 乌迪尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Udyr.png"
            },
            ],
            tk = [{
                name: "正义巨像 加里奥",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Galio.png"
            },
            {
                name: "牛头酋长 阿利斯塔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Alistar.png"
            },
            {
                name: "德玛西亚皇子 嘉文四世",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/JarvanIV.png"
            },
            {
                name: "蒸汽机器人 布里茨",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Blitzcrank.png"
            },
            {
                name: "北地之怒 瑟庄妮",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Sejuani.png"
            },
            {
                name: "深海泰坦 诺提勒斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nautilus.png"
            },
            {
                name: "扭曲树精 茂凯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Maokai.png"
            },
            {
                name: "亡灵战神 赛恩",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Sion.png"
            },
            {
                name: "山隐之焰 奥恩",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ornn.png"
            },
            {
                name: "生化魔人 扎克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Zac.png"
            },
            {
                name: "雪原双子 努努和威朗普",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nunu.png"
            },
            {
                name: "炼金术士 辛吉德",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Singed.png"
            },
            {
                name: "熔岩巨兽 墨菲特",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Malphite.png"
            },
            {
                name: "曙光女神 蕾欧娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Leona.png"
            },
            {
                name: "圣锤之毅 波比",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Poppy.png"
            },
            {
                name: "暮光之眼 慎",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Shen.png"
            },
            {
                name: "虚空恐惧 科加斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Chogath.png"
            },
            {
                name: "殇之木乃伊 阿木木",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Amumu.png"
            },
            {
                name: "披甲龙龟 拉莫斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Rammus.png"
            },
            ],
            ss = [{
                name: "探险家 伊泽瑞尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ezreal.png"
            },
            {
                name: "戏命师 烬",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Jhin.png"
            },
            {
                name: "寒冰射手 艾希",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ashe.png"
            },
            {
                name: "战争女神 希维尔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Sivir.png"
            },
            {
                name: "暗夜猎手 薇恩",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Vayne.png"
            },
            {
                name: "麦林炮手 崔丝塔娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Tristana.png"
            },
            {
                name: "德玛西亚之翼 奎因",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Quinn.png"
            },
            {
                name: "迅捷斥候 提莫",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
            },
            {
                name: "赏金猎人 厄运小姐",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/MissFortune.png"
            },
            {
                name: "英勇投弹手 库奇",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Corki.png"
            },
            {
                name: "复仇之矛 卡莉丝塔",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kalista.png"
            },
            {
                name: "惩戒之箭 韦鲁斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Varus.png"
            },
            {
                name: "深渊巨口 克格莫",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/KogMaw.png"
            },
            {
                name: "永猎双子 千珏",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kindred.png"
            },
            {
                name: "皮城女警 凯特琳",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Caitlyn.png"
            },
            {
                name: "虚空之女 卡莎",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Kaisa.png"
            },
            {
                name: "荣耀行刑官 德莱文",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Draven.png"
            },
            {
                name: "逆羽 霞",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Xayah.png"
            },
            {
                name: "法外狂徒 格雷福斯",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Graves.png"
            },
            {
                name: "暴走萝莉 金克丝",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Jinx.png"
            },
            {
                name: "圣枪游侠 卢锡安",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Lucian.png"
            },
            {
                name: "瘟疫之源 图奇",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Twitch.png"
            },
            ],
            fz = [{
                name: "弗雷尔卓德之心 布隆",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Braum.png"
            },
            {
                name: "翠神 艾翁",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Ivern.png"
            },
            {
                name: "瓦洛兰之盾 塔里克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Taric.png"
            },
            {
                name: "唤潮鲛姬 娜美",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Nami.png"
            },
            {
                name: "魂锁典狱长 锤石",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Thresh.png"
            },
            {
                name: "琴瑟仙女 娑娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Sona.png"
            },
            {
                name: "众星之子 索拉卡",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Soraka.png"
            },
            {
                name: "血港鬼影 派克",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Pyke.png"
            },
            {
                name: "河流之王 塔姆",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/TahmKench.png"
            },
            {
                name: "风暴之怒 迦娜",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Janna.png"
            },
            {
                name: "仙灵女巫 璐璐",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Lulu.png"
            },
            {
                name: "时光守护者 基兰",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Zilean.png"
            },
            {
                name: "幻翎 洛",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Rakan.png"
            },
            {
                name: "星界游神 巴德",
                img: "https://ossweb-img.qq.com/images/lol/img/champion/Bard.png"
            },
            ];

            function reset() {
                let ck1 = ck2 = fs1 = fs2 = zs1 = zs2 = tk1 = tk2 = ss1 = ss2 = fz1 = fz2 = "";
                let ck1_num = ck2_num = fs1_num = fs2_num = zs1_num = zs2_num = tk1_num = tk2_num = ss1_num = ss2_num = fz1_num = fz2_num = 0;

                ck.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        ck1 += h;
                        ck1_num++;
                    } else {
                        if (v == '2') {
                            ck2 += h;
                            ck2_num++;
                        } else {
                            ck1 += h;
                            ck1_num++;
                        }
                    }
                });

                fs.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        fs1 += h;
                        fs1_num++;
                    } else {
                        if (v == '2') {
                            fs2 += h;
                            fs2_num++;
                        } else {
                            fs1 += h;
                            fs1_num++;
                        }
                    }
                });
                zs.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        zs1 += h;
                        zs1_num++;
                    } else {
                        if (v == '2') {
                            zs2 += h;
                            zs2_num++;
                        } else {
                            zs1 += h;
                            zs1_num++;
                        }
                    }
                });
                tk.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        tk1 += h;
                        tk1_num++;
                    } else {
                        if (v == '2') {
                            tk2 += h;
                            tk2_num++;
                        } else {
                            tk1 += h;
                            tk1_num++;
                        }
                    }
                });
                ss.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        ss1 += h;
                        ss1_num++;
                    } else {
                        if (v == '2') {
                            ss2 += h;
                            ss2_num++;
                        } else {
                            ss1 += h;
                            ss1_num++;
                        }
                    }
                });
                fz.forEach(function(e, i) {
                    let v = getItem(e.name);
                    let h = getHTML(e);
                    if (!v) {
                        fz1 += h;
                        fz1_num++;
                    } else {
                        if (v == '2') {
                            fz2 += h;
                            fz2_num++;
                        } else {
                            fz1 += h;
                            fz1_num++;
                        }
                    }
                });

                document.querySelector("#ck1").innerHTML = ck1;
                document.querySelector("#fs1").innerHTML = fs1;
                document.querySelector("#zs1").innerHTML = zs1;
                document.querySelector("#tk1").innerHTML = tk1;
                document.querySelector("#ss1").innerHTML = ss1;
                document.querySelector("#fz1").innerHTML = fz1;
                //"未使用 - " + 
                document.querySelector("#type1").innerHTML = (ck1_num + fs1_num + zs1_num + tk1_num + ss1_num + fz1_num);

                document.querySelector("#ck2").innerHTML = ck2;
                document.querySelector("#fs2").innerHTML = fs2;
                document.querySelector("#zs2").innerHTML = zs2;
                document.querySelector("#tk2").innerHTML = tk2;
                document.querySelector("#ss2").innerHTML = ss2;
                document.querySelector("#fz2").innerHTML = fz2;
                //"已使用 - " +
                document.querySelector("#type2").innerHTML = (ck2_num + fs2_num + zs2_num + tk2_num + ss2_num + fz2_num);

                $('table th:nth-child(2)').html("刺客 " + numHTML(ck1_num, ck2_num));
                $('table th:nth-child(3)').html("法师 " + numHTML(fs1_num, fs2_num));
                $('table th:nth-child(4)').html("战士 " + numHTML(zs1_num, zs2_num));
                $('table th:nth-child(5)').html("坦克 " + numHTML(tk1_num, tk2_num));
                $('table th:nth-child(6)').html("射手 " + numHTML(ss1_num, ss2_num));
                $('table th:nth-child(7)').html("辅助 " + numHTML(fz1_num, fz2_num));

                $('img').click(function(e, i) {
                    let name = e.target.title;
                    console.log(e.target.title);
                    tirgger(name);
                    reset();
                });

            }

            reset();

            function importData(text) {
                let arr = text.split("|");

                let showName = getItem("showName");
                localStorage.clear();
                localStorage.setItem("showName", showName);

                arr.forEach(function(name, index) {
                    console.log(name, index);
                    function verif(e, i) {
                        let v = getItem(e.name);
                        let t = e.name.split(" ");
                        if (name == t[1]) {
                            localStorage.setItem(e.name, 2);
                        }
                    }
                    ck.forEach(verif);
                    fs.forEach(verif);
                    zs.forEach(verif);
                    tk.forEach(verif);
                    ss.forEach(verif);
                    fz.forEach(verif);

                });

            }

            function exportData() {
                let storage = window.localStorage;
                let arr = [];
                for (let i = 0, len = storage.length; i < len; i++) {
                    let key = storage.key(i);
                    let value = storage.getItem(key);
                    if (value == "2") {
                        let t = key.split(" ");
                        if (t.length === 2) {
                            arr.push(t[1]);
                        }
                    }
                }
                return arr.join("|");

            }

            $('#t').click(function(e, i) {
                let name = "showName";
                let v = getItem(name);
                if (!v) {
                    localStorage.setItem(name, true);
                } else {
                    if (v == 'true') {
                        localStorage.setItem(name, false);
                    } else {
                        localStorage.setItem(name, true);
                    }
                }
                reset();
            });

            $('#import').click(function() {
                layer.open({
                    type: 1,
                    title: "导入",
                    closeBtn: 1,
                    area: ['500px', '230px'],
                    shadeClose: true,
                    //点击遮罩关闭
                    skin: 'yourclass',
                    content: '<textarea id="importText" type="text" autofocus="" placeholder="盖伦|剑圣|赵信"></textarea>',
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {
                        console.log("按钮1", index, layero);
                        let v = $('#importText').val();
                        v = v.replace(/ |\n|\r/g,"");
                        importData(v);
                        reset();
                        layer.close(index);

                    }

                },
                );
            });
            function selectExport() {
                document.querySelector("#exportText").select();
                layer.tips('按Ctrl + C 复制', '#exportText');
            }
            $('#export').click(function() {
                let data = exportData();
                layer.open({
                    type: 1,
                    title: "导出",
                    closeBtn: 1,
                    area: ['500px', '330px'],
                    shadeClose: true,
                    //点击遮罩关闭
                    skin: 'yourclass',
                    content: '<textarea id="exportText" type="text" autofocus="" readonly onclick="selectExport()">' + data + '</textarea>',
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {

                        console.log(v);
                    }

                },
                );
            });
            function reverse(){
                let showName = getItem("showName");


                let storage = window.localStorage;
                let arr = [];
                for (let i = 0, len = storage.length; i < len; i++) {
                    let key = storage.key(i);
                    let value = storage.getItem(key);
                    if (value == "2") {
                        arr.push(key);
                    }
                }

                localStorage.clear();

                function verif(e, i) {
                    let v = getItem(e.name);
                    let t = e.name.split(" ");
                    if (arr.indexOf(e.name) != -1) {
                        localStorage.setItem(e.name, 1);
                    }else{
                        localStorage.setItem(e.name, 2);
                    }
                }
                ck.forEach(verif);
                fs.forEach(verif);
                zs.forEach(verif);
                tk.forEach(verif);
                ss.forEach(verif);
                fz.forEach(verif);

                localStorage.setItem("showName", showName);
            }


            $('#reverse').click(function() {
                reverse();
                reset();
            });



            function errimg(e){
                //调用函数获取到img的data数据
                let n = e.title.split(" ")[1];
                let data = canvasWrapText({text:n});
                e.src= data;
            }





    </script>
    <script>
        // var _hmt = _hmt || []; (function() {
        //     var hm = document.createElement("script");
        //     hm.src = "https://hm.baidu.com/hm.js?fde540cbb370a36d9bf391fc63489f01";
        //     var s = document.getElementsByTagName("script")[0];
        //     s.parentNode.insertBefore(hm, s);
        // })();
    </script>

    </body>

</html>